<!--
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2020-11-24 16:31:23
 * @LastEditors: sueRimn
 * @LastEditTime: 2020-11-25 16:53:48
-->
<template>
    <div class="box">
        <div class="itemList">
            <div class="item" v-for="(item, index) in listData" :key="index">
                <div class="itemLeft">
                    <div class="Icon">
                        <i
                            class="el-icon-date
"
                        ></i>
                    </div>
                    <div class="itemInfo">
                        <div class="title ShengLue">
                            {{ item.schedule_name }}
                        </div>
                        <div class="date ShengLue">
                            备注：{{ item.remark ? item.remark : "无" }}
                        </div>
                    </div>
                </div>
                <div>
                    <el-button type="text" @click="selectScheduleID(item)"
                        >设置课表</el-button
                    >
                </div>
            </div>
            <div v-if="listData.length == 0" class="noMore">
                -- 暂无数据 --
            </div>
            <!-- //分页 -->
            <!-- <div class="bottomPagination">
                <el-pagination
                    :current-page="currentPage"
                    layout="prev, pager, next"
                    small
                    :page-size="pageSize"
                    :total="total"
                    @current-change="handleCurrentChange"
                />
            </div> -->
        </div>
        <div class="rightBox">
            <el-card style="min-height: 700px;">
                <div class="row">
                    <div>
                        <el-button
                            type="primary"
                            size="mini"
                            @click="dialogVisible = true"
                            >创建日程</el-button
                        >
                    </div>
                </div>
                <div class="title">日程名：{{ scheduleName }}</div>
                <div class="rightList" v-if="scheduleID">
                    <ClassTable :scheduleItem="scheduleItem"></ClassTable>
                </div>
            </el-card>
        </div>
        <el-dialog title="创建日程" :visible.sync="dialogVisible" width="30%">
            <el-form
                label-width="80px"
                :model="form"
                :rules="rules"
                ref="ruleForm"
            >
                <el-form-item label="日程名称" prop="schedule_name">
                    <el-input
                        placeholder="请输入日程名称(必填)"
                        style="width:220px"
                        v-model="form.schedule_name"
                    ></el-input>
                </el-form-item>
                <el-form-item label="年度选择" prop="semester_id">
                    <el-select placeholder="请选择" v-model="form.semester_id">
                        <el-option
                            v-for="item in yearlistData"
                            :key="item.unid"
                            :label="item.semester_name"
                            :value="item.unid"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="时段选择" prop="time_main_id">
                    <el-select placeholder="请选择" v-model="form.time_main_id">
                        <el-option
                            v-for="item in timelistData"
                            :key="item.unid"
                            :label="item.name"
                            :value="item.unid"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input
                        placeholder="请输入备注"
                        style="width:220px"
                        v-model="form.remark"
                    ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="add('ruleForm')"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    getStuTime,
    getStuSchedule,
    toGetStuSemester,
    tiSaveStuSchedule
} from "@/api/table/index";
import ClassTable from "./components/table";
export default {
    components: {
        ClassTable
    },
    data() {
        return {
            // pageSize: 5,
            // currentPage: 1,
            // total: 0,
            listData: [],
            scheduleID: "",
            scheduleName: "",
            scheduleItem: {},
            yearlistData: [],
            timelistData: [],
            dialogVisible: false,
            form: {
                schedule_name: "",
                semester_id: "",
                time_main_id: "",
                remark: ""
            },
            //验证
            rules: {
                schedule_name: [
                    {
                        required: true,
                        message: "请输入日程名称",
                        trigger: "blur"
                    }
                ],
                semester_id: [
                    {
                        required: true,
                        message: "请选择年度",
                        trigger: "change"
                    }
                ],
                time_main_id: [
                    {
                        required: true,
                        message: "请选择时段",
                        trigger: "change"
                    }
                ]
            }
        };
    },
    created() {
        this.StuSchedule();
        this.getYearStuSemester();
        this.getTimeStuSemester();
    },
    methods: {
        async StuSchedule() {
            var query = {
                usr_id: this.$store.getters.userInfo.id
            };
            var list = await getStuSchedule(query);
            if (list.code == 200) {
                this.listData = list.data;
            }
            console.log("拉取日程：", list);
        },
        async getYearStuSemester() {
            var query = {
                limit: 999,
                usr_id: this.$store.getters.userInfo.id
            };
            var list = await toGetStuSemester(query);
            if (list.code == 200) {
                this.yearlistData = list.data.list;
            }
            console.log("拉取年度：", list);
        },
        async getTimeStuSemester() {
            var query = {
                limit: 999,
                usr_id: this.$store.getters.userInfo.id
            };
            var list = await getStuTime(query);
            if (list.code == 200) {
                this.timelistData = list.data.list;
            }
            console.log("拉取时段：", list);
        },
        add(formName) {
            this.$refs[formName].validate(async valid => {
                if (valid) {
                    var query = {
                        usr_id: this.$store.getters.userInfo.id,
                        ...this.form
                    };
                    var list = await tiSaveStuSchedule(query);
                    if (list.code == 200) {
                        this.$message({
                            type: "success",
                            customClass: "customClass",
                            message: "创建成功!"
                        });
                        this.StuSchedule();
                        this.dialogVisible = false;
                    } else {
                        this.$message.error(list.message);
                    }
                    console.log("新增日程", list);
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        selectScheduleID(item) {
            this.scheduleID = item.unid;
            this.scheduleName = item.schedule_name;
            this.scheduleItem = item;
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getStuSemester();
        }
    }
};
</script>

<style scoped lang="scss">
.box {
    width: 100%;
    padding-left: 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    .row {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 30px;
    }

    .itemList {
        width: 32%;

        .item {
            width: 100%;
            border: solid 1px #e9e9e9;
            border-radius: 4px;
            height: 100px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            box-sizing: border-box;
            margin-right: 2%;
            margin-bottom: 15px;
            cursor: pointer;
            &:hover {
                box-shadow: 5px 5px 5px #eeeeee;
            }

            .itemLeft {
                display: flex;
                align-items: center;
            }

            .Icon {
                width: 60px;
                height: 60px;
                background: #00d5a2;
                border-radius: 50%;
                text-align: center;
                line-height: 60px;
                font-size: 38px;
                color: #ffffff;
            }

            .itemInfo {
                margin-left: 10px;
                line-height: 25px;

                .title {
                    font-size: 16px;
                    font-weight: 600;
                }

                .date {
                    font-size: 14px;
                    color: #999999;
                    width: 140px;
                }

                .rightList {
                }
            }
        }
    }

    .rightBox {
        width: 65%;

        .title {
            font-size: 16px;
            font-weight: 600;
            color: #6d7785;
        }
    }

    //省略文本
    .ShengLue {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #6d7785;
    }

    .bottomPagination {
        padding: 15px 0;
        text-align: center;
        width: 100%;
        box-sizing: border-box;
    }

    .noMore {
        width: 100%;
        text-align: center;
        font-size: 14px;
        color: #6d7785;
        margin: 100px 0;
    }
}
</style>
